
import React from 'react';
import { Ellipsis } from 'antd-mobile';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom'

const MyTitle = styled.div`
font-size:13px;
font-weight: bold;
`
const ProList =(props)=>{
  const { proList } = props
  // 处理价格函数
  const formatMoneyFn = (money) => {
    return <span style={{
      fontSize: '15px',
      color: 'red',
      marginLeft: '8px',
      fontWeight: 'bold'
    }}>${money.toFixed(2)}</span>
  }

  const his = useHistory()
  return (
    <ul style={{
      display: 'flex',
      flexWrap: 'wrap',
      marginTop: '30px',
      listStyle: 'none',
      justifyContent:'space-between'
    }}>
      {
        proList.map(item => <li key={item.proid} style={{ width: '49%',
        // padding:'4px'
      }} onClick={() => {
          console.log(item.proid);
          // 传参数 跳转到详情页 hooks useHistory
          his.push('/detail/' + item.proid)
        }}>
          <img src={item.img1} alt="" style={{
            width: '100%'
          }} />
          <MyTitle>
            <Ellipsis rows={2} direction='end' content={item.proname}></Ellipsis>
          </MyTitle>
{/*           
          <Ellipsis rows={2} direction='end' content={item.proname} style={{
            fontSize: '13px',
            fontWeight: 'bold'
          }}></Ellipsis> */}

          <p> {formatMoneyFn(item.originprice)}</p>
        </li>)
      }
    </ul>
  )
}
export default ProList;